<!-- 投资组合 -->
<template>
  <div class="main">
    <div class="main_top">
      <el-tabs type="border-card">
        <el-tab-pane label="现金管理类">
          <pure-table border align-whole="center" @row-click="AddSeleteData" showOverflowTooltip table-layout="auto"
            :loading="loading" size="small" :data="dataList" max-height="300" :columns="columns1" :pagination="pagination"
            :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }" @size-change="handleSizeChange" @current-change="handleCurrentChange">
          </pure-table>

        </el-tab-pane>
        <el-tab-pane label="固定收益类">
          <pure-table border align-whole="center" @row-click="AddSeleteData" showOverflowTooltip table-layout="auto"
            :loading="loading2" size="small" :data="dataList2" max-height="300" :columns="columns"
            :pagination="pagination2" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }" @size-change="handleSizeChange2" @current-change="handleCurrentChange2">
          </pure-table>
        </el-tab-pane>
        <el-tab-pane label="权益收益类">
          <pure-table border align-whole="center" @row-click="AddSeleteData" showOverflowTooltip table-layout="auto"
            :loading="loading3" size="small" :data="dataList3" max-height="300" :columns="columns"
            :pagination="pagination3" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }" @size-change="handleSizeChange3" @current-change="handleCurrentChange3">
          </pure-table>
        </el-tab-pane>
        <el-tab-pane label="另类及其他">
          <pure-table border align-whole="center" @row-click="AddSeleteData" showOverflowTooltip table-layout="auto"
            :loading="loading4" size="small" :data="dataList4" max-height="300" :columns="columns"
            :pagination="pagination4" :header-cell-style="{
              background: 'var(--el-table-row-hover-bg-color)',
              color: 'var(--el-text-color-primary)'
            }" @size-change="handleSizeChange4" @current-change="handleCurrentChange4">
          </pure-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="main_bottom">
      <!-- 已选基金 -->
      <div class="main_bottom_table">
        <pure-table border align-whole="center" showOverflowTooltip table-layout="auto" :loading="loading5" size="small"
          :data="dataList5" max-height="420" :columns="columns3" :header-cell-style="{
            background: 'var(--el-table-row-hover-bg-color)',
            color: 'var(--el-text-color-primary)'
          }">
          <template #operation="{ row }">
            <i>
              <Plus class=" plusIcon" @click="DeleteSeleteData(row)" />
            </i>
          </template>
        </pure-table>
      </div>
      <p class="bot_btn">
        <el-button size="small" @click="TrialSimulation()">试算模拟年化收益率</el-button>
      </p>
    </div>
    <!-- 试算模拟年化收益率 -->

    <ReDialog :width="700" :height="550" :models="Visible" @Closes="closefrom(reffrom)">
      <template #header>
        <h2 style="text-align: center;">试算模拟年化收益率</h2>
      </template>
      <template #main>
        <div class="Visible_one">
          <ul class="Visible_one_li">
            <li class="_lilfet">{{ form.yearsyield }}%</li>
            <li>模拟年化收益率</li>
          </ul>
          <ul class="Visible_one_li">
            <li class="_liright">{{ form.yerasvolatility }}%</li>
            <li>模拟年化波动率</li>
          </ul>
        </div>
        <div class="Visible_two">
          <div id="visible_pie" v-if="Visible" class="visible_pie"></div>
        </div>
        <el-form label-width="140px" :model="form" :rules="rules" class="reffrom" ref="reffrom">
          <el-form-item label="投资人群风险等级" prop="fromLv" v-if="!portfolioldId">
            <el-select placeholder="请选择投资人群风险等级" v-model="form.fromLv">
              <el-option label="保守型" value="保守型"></el-option>
              <el-option label="稳健型" value="稳健型"></el-option>
              <el-option label="平衡型" value="平衡型"></el-option>
              <el-option label="成长型" value="成长型"></el-option>
              <el-option label="进取型" value="进取型"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="投资组合名称" prop="name" v-if="!portfolioldId">
            <el-input v-model.trim="form.name" />
          </el-form-item>
          <el-form-item label="建议持有期限" prop="date" v-if="!portfolioldId">
            <el-input class="reffrom_inpu" type="number" v-model.number="form.date" />个月
          </el-form-item>
        </el-form>
      </template>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" :loading="BtnLoading" @click="stubimfrom(reffrom)"> 确定 </el-button>
          <el-button @click="closefrom(reffrom)"> 取消 </el-button>
        </span>
      </template>
    </ReDialog>

  </div>
</template>
<script lang="ts" setup>
import { Plus } from "@element-plus/icons-vue";
import { useInvestment } from "./hook/InvestmentPortfolio";
const prop = defineProps({
  PropData: {
    type: Array,
    default: () => []
  },
  portfolioldId: {
    type: String,
    default: () => ""
  },
})
const {
  form,
  rules,
  reffrom,
  Visible,
  columns,
  columns1,
  dataList,
  loading,
  num_there,
  productOne,
  pagination,
  dataList2,
  loading2,
  pagination2,
  columns3,
  dataList3,
  loading3,
  dataList4,
  loading4,
  dataList5,
  loading5,
  BtnLoading,
  pagination3,
  pagination4,
  portfolioldId,
  closefrom,
  stubimfrom,
  AddSeleteData,
  DeleteSeleteData,
  TrialSimulation,
  handleSizeChange,
  handleCurrentChange,
  handleSizeChange2,
  handleCurrentChange2,
  handleSizeChange3,
  handleCurrentChange3,
  handleSizeChange4,
  handleCurrentChange4
} = useInvestment(prop)
</script>

<style scoped lang="scss">
@import url(@/style/CreditComm.scss);

.main {
  height: 100%;
}

.main_top {
  height: 49.5%;
}

.main_bottom {
  top: 1%;
  height: 49.5%;
  position: relative;
  border: 1px solid #dcdfe6;
}

.main_bottom .bot_btn {
  // position: absolute;
  // bottom: 0;
  width: 100%;
  // left: 0;
  text-align: center;
  padding-bottom: 5px;
  z-index: 50;
  // left: 0;
  // right: 0;
  // bottom: 0;
}

.main_bottom_table {
  height: calc(100% - 30px);

  :deep(.el-table--fit) {
    height: 100%;
  }
}

:deep(.el-tabs__content) {
  height: calc(100% - 40px);
}

:deep(.el-tabs) {
  height: 100%;
}

:deep(.myicon) {
  margin: 0 auto;
  font-size: 22px;
  color: #dc0000;
}

.pure-table {
  /* height: 100%; */
  height: calc(100% - 10px);
}

.Visible_one {
  width: 80%;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;

  .Visible_one_li {
    width: 40%;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #7f7f7f;

    ._lilfet {
      color: #ff0f9d;
      font-size: 24px;

    }

    ._liright {
      color: #000000;
      font-size: 24px;
    }
  }
}

.Visible_two {
  width: 80%;
  margin: 0 auto;

  .visible_pie {
    width: 350px;
    height: 300px;
    margin: 0 auto;
  }
}

.reffrom {
  width: 60%;
  margin: 0 auto;

  .el-input {
    width: 215px;
  }

  .reffrom_inpu {
    width: 190px;
  }
}

:deep(.el-dialog__footer) {
  text-align: center;
}

.plusIcon {
  color: red;
  width: 1.3rem;
  height: 1.3rem;
  margin: auto;
  transform: rotateZ(45deg);
  font-weight: bold;
  cursor: pointer;
}

@media screen and (max-width:1600px) {
  :deep(.el-table--fit) {
    height: 78%;
  }
}
</style>
